<template>
  <n-drawer
    v-model:show="active"
    :width="'100%'"
    placement="top"
    style="background-color: transparent; box-shadow: none"
    show-mask="transparent"
    :height="'100%'"
  >
    <n-drawer-content>
      <template #header>
        <div class="flex items-center justify-between w-full bg-white">
          <img
            src="https://static.huicanzhan.cn/common/sponsor/logo@2x.png"
            class="w-auto h-[36px]"
            @click="toHome"
          />
          <div @click="active = false">x</div>
        </div>
      </template>

      <n-menu :options="h5Options" :on-update:value="handleUpdate" class="tmenu" />
    </n-drawer-content>
  </n-drawer>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const active = ref(false);
  import { h5Options, useMenuLink } from './menuOptions';
  const { toHome, toSponsor, toNext, handleSelect } = useMenuLink();
  const open = () => {
    active.value = true;
  };
  function handleUpdate(key) {
    console.log(key);
    switch (key) {
      case 'Home':
        toHome();
        break;
      case 'Price':
        toNext('/price');
        break;
      case 'Login':
        toSponsor();
        break;
      default:
        handleSelect(key);
    }
  }
  defineExpose({ open });
</script>
<style lang="less" scoped>
  :deep(.n-drawer) {
    @apply !bg-transparent;
  }
  :deep(.n-drawer-header__main) {
    @apply w-full bg-white;
  }
  :deep(.n-drawer-header) {
    background-color: #fff;
    padding: 11px 24px !important;
  }
  :deep(.n-drawer-body-content-wrapper) {
    padding: 0px 0px !important;
  }
  .tmenu {
    // background-image: url('@/assets/images/index/渐变.png'); background-repeat: no-repeat; background-size: cover;
    background-color: #fafcfe;
  }
  :deep(.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before) {
    background-color: #fff !important;
  }
</style>
